<template>
  <!-- 轮播图 -->
  <!-- 轮播图里面的定位图 -->
  <div class="banner">
   
     <div class="swiper-container">
    <div class="swiper-wrapper" >
       <div class="swiper-slide" v-for="(img,index) in imgs" :key="index">
        <img :src="img" />
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
  
</div>
</div>
 
</template>

<script>
import Vue from "vue";
import axios from "axios";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
 name:"Head",
 data(){
   return {
     imgs:[]
   };
 },
 created(){
   axios({
     url:"http://localhost:3000/imgs"
   })
   .then(res=>{
     console.log(res);
      
       this.imgs = res.data;
        //  this.$nextTick(()=>{
       Vue.nextTick(()=>{
            //这个回调函数的执行时机，是数据改变后，引起的dom更新结束后调用的。
            new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
            speed:500,
            autoplay:true,
            
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }
          })
       });
    });
  }
};
</script>

<style scoped>
@import url(../assets/rest.css);

.swiper-container{
  width: 100%;
  height: 2.5rem;
  background-color: pink;
}
.swiper-container img{
  width: 100%;
  height: 2.5rem;
  position: absolute;
}
.swiper-pagination{
  position: absolute;
  bottom: 0.6rem;
  right: 0.3rem;

}

.swiper-pagination-bullet-active{
color: white;

}
.swiper-button-prev,.swiper-button-next{
  color: white;
  opacity: 0.2;
}
 .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 70px;
    left: 0;
    width: 100%;
 }
</style>
